<template>
        <div class="film-list-content">
            <van-list @load="onLoad" :finished="finished" v-model="loading" finished-text="没有更多了">
            <ul class="film-list-group">
                <!-- 一个列表项start -->
                <li class="film-list-item" v-for="item in detailList" :key="item.filmId">
                    <router-link :to="'/movie/'+item.filmId">
                        <div class="film-list-item-pic padding">
                            <img :src="item.poster" />
                        </div>
                        <div class="film-list-item-desc">
                            <h3 class="item-desc-name"><span class="name">{{item.name}}</span><span class="is-3d">{{item.filmType.name}}</span></h3>
                            <p class="item-desc-grade info-col"><span>观众评分 </span><span class="grade">{{item.grade}}</span></p>
                            <p class="item-desc-actors info-col"><label>主演：</label><span>{{item.actors|getActName}}</span></p>
                            <p class="item-desc-times info-col"><label>{{item.nation}}</label> | <span>{{item.runtime}}分钟</span></p>
                        </div>
                        <div class="film-list-item-action padding"><span href="" class="buy"><router-link :to="'/movie/'+item.filmId+'/cinemas'">购买</router-link></span></div>
                        </router-link>
                </li>
            </ul>
            </van-list>

        </div>

</template>
<script>
import { getDetail } from "@/api/movie.js";
export default {
    data(){
        return{
            detailList:[],
            info:{type:2,
                  pageNum:0,
                  pageSize:10,
                  total:-1
            },
            finished:false,
            loading:false
        }
    },
    created(){
     //this.getdetailList()    //load 一开始就会执行（组件官网上有说明）
    },
    methods:{
        getdetailList(){
            this.info.pageNum+=1
            var movInfo={...this.info}
            delete movInfo.total
            getDetail(movInfo).then(res=>{
                console.log(res)
                if(res.status==0){
               this.detailList.push(...res.data.films)
               this.info.total=res.data.total
                }
                this.loading=false
            })
        },
        onLoad(){
             console.log('加载更多')
            console.log(this.detailList.length)
            console.log(this.info.total)
            setTimeout(()=>{
                if(this.detailList.length==this.info.total){
                console.log('加载完成')
                this.loading=false
                this.finished=true
                return
            }
             this.getdetailList()
             

            },1000)
            
        }
    }
}
</script>


<style lang="scss" scoped>
.film-list-content{
    /* margin-top:1.86rem; */
    background: #fff;
    padding-bottom: 0.98rem;
    font-size:0.4rem;
    text-align:center;

}
.film-list-group{
    padding:0 0.3rem;
}
.film-list-item{
    height: 1.88rem;
    padding:0.3rem 0;
    position: relative;
}
.film-list-item:after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.film-list-item>a{
    display: flex;
    width:100%;
    align-items: center;
}
.film-list-item-pic{
    width:1.32rem;
    height: 1.88rem;
    flex:none;
    overflow:hidden;
}
.padding{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.film-list-item-pic>img{
    width: 100%;
}
.film-list-item-desc{
    flex:1;
    padding:0 .2rem;
    max-width: calc(100% - 2.32rem);
    box-sizing: border-box;
    text-align: left;
}
.item-desc-name{
    font-size:.32rem;
}
.item-desc-name .name{
    color: #191a1b;
    margin-right: 0.1rem;
}
.item-desc-name .is-3d{
    font-size: .18rem;
    color: #fff;
    background-color: #d2d6dc;
    height: .28rem;
    line-height: .28rem;
    padding: 0 2px;
    border-radius: 2px;
}
.film-list-item-desc .info-col{
    font-size:.26rem;
    color: #797d82;
    margin-top:.12rem;
    overflow-x: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.item-desc-grade .grade{
    color: #ffb232;
    font-size:.28rem;
}
.film-list-item-action{
    width:1rem;
    flex:none;
    height: 1.1rem;
    font-size:0;
    a{
  color:  #ff5f16;
  width:1rem;
  height:0.5rem;
  float: left;
      }
}
.film-list-item-action .buy{
    display: block;
    box-sizing: border-box;
    line-height: .5rem;
    height: .5rem;
    width: 1rem;
    color: #ff5f16;
    font-size: .26rem;
    text-align: center;
    position: relative;
    border: 1px solid #ff5f16;
    border-radius: 2px;
}
</style>